Card.render - Code Metrics - Inspection of "Preseason header." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/preseason-2020-2021 ( 0f5b63...815229 )

by Kevin Van

created 2020-07-06 07:29 UTC

Card.render B

↳ Parent: Project

Complexity

Conditions

Size

Total Lines	75
Code Lines	60

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	1
eloc	60
dl	0
loc	75
rs	8.309
c	0
b	0
f	0

How to fix Long Method

import React, { Component } from "react"
import { Link } from "gatsby"
import Img from "gatsby-image"

import "./cards.scss"

/**
 * Render a card layout (image / tag / title / excerpt).
 */
export class Card extends Component {
  render() {
    const {
      title,
      body = null,
      localFile,
      link,
      metadata = false,
      tags = [],
      created = null,
    } = this.props

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 3 / 2,
        }}
        alt={title}
      />
    )

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    return (
      <article className={"cardItem"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
            </header>

            <main className={"cardItem__summary"}>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>

              {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
            </main>
          </Link>
        )}

        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
            </header>

            <main className={"cardItem__summary"}>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>

              {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
            </main>
          </a>
        )}

        {metadata && (
          <footer className={"cardItem__footer article__tags"}>
            <span className={"datetime"}>
              <i className={"fa fa-clock-o"} aria-hidden="true"></i> {created}
            </span>
            {tags.length > 0 && (
              <span className={"tag__wrapper"}>
                <i className={"fa fa-tags"} aria-hidden="true"></i>{" "}
                {tags.map(({ path, name }, i) => (
                  <Link to={path.alias} key={i}>
                    <span className={"tag__label"}>#{name}</span>
                  </Link>
                ))}
              </span>
            )}
          </footer>
        )}
      </article>
    )
  }
}

export class CardImage extends Component {
  render() {
    const { title, localFile, link, body = null } = this.props
    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 2 / 1,
        }}
        alt={title}
      />
    )

    const content = (
      <header>
        <figure>{image}</figure>
        <div className={"gradient gradient--70"}></div>
        <div className={"cardItem__heading"}>
          <h3>{title}</h3>
          {body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
        </div>
      </header>
    )

    return (
      <article className={"cardItem cardItem--image"}>
        {link === false && content}
        {link !== false &&
          (absoluteUrlRegex.test(link) || <Link to={link}>{content}</Link>)}
        {link !== false && absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            {content}
          </a>
        )}
      </article>
    )
  }
}

export class SingleImageCard extends Component {
  render() {
    const { localFile, link } = this.props

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 2 / 1,
        }}
      />
    )

    return (
      <article className={"cardItem cardItem--vertical"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
            </header>
          </Link>
        )}
        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
            </header>
          </a>
        )}
      </article>
    )
  }
}

export class CardVertical extends Component {
  render() {
    const { title, localFile, link } = this.props

    const absoluteUrlRegex = /^https?:\/\/|^\/\//i

    const image = (
      <Img
        fluid={{
          ...localFile.childImageSharp.fluid,
          aspectRatio: 6 / 8,
        }}
        alt={title}
      />
    )

    return (
      <article className={"cardItem cardItem--vertical"}>
        {absoluteUrlRegex.test(link) || (
          <Link to={link}>
            <header>
              <figure>{image}</figure>
              <div className={"gradient gradient--70"}></div>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>
            </header>
          </Link>
        )}
        {absoluteUrlRegex.test(link) && (
          <a href={link} target="_blank" rel="noopener noreferrer">
            <header>
              <figure>{image}</figure>
              <div className={"gradient gradient--70"}></div>
              <div className={"cardItem__heading"}>
                <h3>{title}</h3>
              </div>
            </header>
          </a>
        )}
      </article>
    )
  }
}


1			import React, { Component } from "react"
2			import { Link } from "gatsby"
3			import Img from "gatsby-image"
4
5			import "./cards.scss"
6
7			/**
8			* Render a card layout (image / tag / title / excerpt).
9			*/
10			export class Card extends Component {
11			render() {
12			const {
13			title,
14			body = null,
15			localFile,
16			link,
17			metadata = false,
18			tags = [],
19			created = null,
20			} = this.props
21
22			const image = (
23			<Img
24			fluid={{
25			...localFile.childImageSharp.fluid,
26			aspectRatio: 3 / 2,
27			}}
28			alt={title}
29			/>
30			)
31
32			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
33
34			return (
35			<article className={"cardItem"}>
36			{absoluteUrlRegex.test(link) \|\| (
37			<Link to={link}>
38			<header>
39			<figure>{image}</figure>
40			</header>
41
42			<main className={"cardItem__summary"}>
43			<div className={"cardItem__heading"}>
44			<h3>{title}</h3>
45			</div>
46
47			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
48			</main>
49			</Link>
50			)}
51
52			{absoluteUrlRegex.test(link) && (
53			<a href={link} target="_blank" rel="noopener noreferrer">
54			<header>
55			<figure>{image}</figure>
56			</header>
57
58			<main className={"cardItem__summary"}>
59			<div className={"cardItem__heading"}>
60			<h3>{title}</h3>
61			</div>
62
63			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
64			</main>
65			</a>
66			)}
67
68			{metadata && (
69			<footer className={"cardItem__footer article__tags"}>
70			<span className={"datetime"}>
71			<i className={"fa fa-clock-o"} aria-hidden="true"></i> {created}
72			</span>
73			{tags.length > 0 && (
74			<span className={"tag__wrapper"}>
75			<i className={"fa fa-tags"} aria-hidden="true"></i>{" "}
76			{tags.map(({ path, name }, i) => (
77			<Link to={path.alias} key={i}>
78			<span className={"tag__label"}>#{name}</span>
79			</Link>
80			))}
81			</span>
82			)}
83			</footer>
84			)}
85			</article>
86			)
87			}
88			}
89
90			export class CardImage extends Component {
91			render() {
92			const { title, localFile, link, body = null } = this.props
93			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
94
95			const image = (
96			<Img
97			fluid={{
98			...localFile.childImageSharp.fluid,
99			aspectRatio: 2 / 1,
100			}}
101			alt={title}
102			/>
103			)
104
105			const content = (
106			<header>
107			<figure>{image}</figure>
108			<div className={"gradient gradient--70"}></div>
109			<div className={"cardItem__heading"}>
110			<h3>{title}</h3>
111			{body && <div dangerouslySetInnerHTML={{ __html: body }}></div>}
112			</div>
113			</header>
114			)
115
116			return (
117			<article className={"cardItem cardItem--image"}>
118			{link === false && content}
119			{link !== false &&
120			(absoluteUrlRegex.test(link) \|\| <Link to={link}>{content}</Link>)}
121			{link !== false && absoluteUrlRegex.test(link) && (
122			<a href={link} target="_blank" rel="noopener noreferrer">
123			{content}
124			</a>
125			)}
126			</article>
127			)
128			}
129			}
130
131			export class SingleImageCard extends Component {
132			render() {
133			const { localFile, link } = this.props
134
135			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
136
137			const image = (
138			<Img
139			fluid={{
140			...localFile.childImageSharp.fluid,
141			aspectRatio: 2 / 1,
142			}}
143			/>
144			)
145
146			return (
147			<article className={"cardItem cardItem--vertical"}>
148			{absoluteUrlRegex.test(link) \|\| (
149			<Link to={link}>
150			<header>
151			<figure>{image}</figure>
152			</header>
153			</Link>
154			)}
155			{absoluteUrlRegex.test(link) && (
156			<a href={link} target="_blank" rel="noopener noreferrer">
157			<header>
158			<figure>{image}</figure>
159			</header>
160			</a>
161			)}
162			</article>
163			)
164			}
165			}
166
167			export class CardVertical extends Component {
168			render() {
169			const { title, localFile, link } = this.props
170
171			const absoluteUrlRegex = /^https?:\/\/\|^\/\//i
172
173			const image = (
174			<Img
175			fluid={{
176			...localFile.childImageSharp.fluid,
177			aspectRatio: 6 / 8,
178			}}
179			alt={title}
180			/>
181			)
182
183			return (
184			<article className={"cardItem cardItem--vertical"}>
185			{absoluteUrlRegex.test(link) \|\| (
186			<Link to={link}>
187			<header>
188			<figure>{image}</figure>
189			<div className={"gradient gradient--70"}></div>
190			<div className={"cardItem__heading"}>
191			<h3>{title}</h3>
192			</div>
193			</header>
194			</Link>
195			)}
196			{absoluteUrlRegex.test(link) && (
197			<a href={link} target="_blank" rel="noopener noreferrer">
198			<header>
199			<figure>{image}</figure>
200			<div className={"gradient gradient--70"}></div>
201			<div className={"cardItem__heading"}>
202			<h3>{title}</h3>
203			</div>
204			</header>
205			</a>
206			)}
207			</article>
208			)
209			}
210			}
211

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/preseason-2020-2021 ( 0f5b63...815229 )

Card.render B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like